<template>
    <div class="equAlarmRecord bgf radius8">
        <el-row class="c3 fs16" style="margin-bottom: 20px;">
            <el-col :span="12">记录列表</el-col>
            <el-col :span="12">
                <el-row justify="end">
                    <el-button :icon="Delete" type="danger">删除</el-button>
                </el-row>
            </el-col>
        </el-row>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;height: 90%;">
            <el-table-column type="selection" width="55" />
            <el-table-column property="id" label="序号" width="100">
                <template #default="{ $index }">
                    {{ $index + 1 }}
                </template>
            </el-table-column>
            <el-table-column property="devId" label="设备ID" />
            <el-table-column property="orgs" label="组织" />
            <el-table-column property="propertyKey" label="报警属性" />
            <el-table-column property="alarmTime" label="报警时间" />
            <el-table-column property="propertyValue" label="报警数值"></el-table-column>
            <!-- 0未处理，1已处理） -->
            <el-table-column label="报警状态">
                <template #default="scope">
                    <div class="circles" :class="{ 'enable': scope.row.status == '0' }">{{ scope.row.status == '1' ?
                            '已处理' : '待处理'
                    }}</div>
                </template>
            </el-table-column>
            <el-table-column property="operation" label="操作">
                <template #default="scope">
                    <el-link @click="disabled(scope.row)" style="padding: 0 8px;border-right: 1px solid #e4e7ed;"
                        :type="scope.row.status == '0' ? 'primary' : 'info'" :underline="false">确认</el-link>
                    <el-link style="padding: 0 8px;" type="danger" :underline="false">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-top: 10px;" justify="end" align="middle">
            <el-pagination :total="total" :page-sizes="[8, 10, 15, 20]" layout="total,prev, pager, next, sizes"
                @next-click="currentChange" @prev-click="currentChange" @size-change="sizeChange"
                @current-change="currentChange"></el-pagination>
        </el-row>
    </div>
</template>

<script setup>
import { Plus, Delete } from '@element-plus/icons-vue';
import { ref, onBeforeMount } from 'vue'
import { ElTable } from 'element-plus'
import { getDeviceAlarmList } from "@/api"
const pageSize = [8, 10, 15, 20];
// 当前每页数量
const size = ref(10);
// 当前页
const current = ref(1);
// 总条数
const total = ref(0);

const tableData = ref([])
const getAlarmRecord = async () => {
    let pdata = {
        current: current.value,
        size: size.value,
    }
    let data = await getDeviceAlarmList(pdata);
    console.log('eeee',data)
    tableData.value = data.records;
    total.value = data.total;
}

//选择具体页数(包括左右页数变换)
const currentChange = (page) => {
    current.value = page;
    getAlarmRecord();
}
//选择每页条数数量
const sizeChange = (page) => {
    size.value = page;
    getAlarmRecord();
}

const disabled = (row) => {
    console.log('row', row)
}
onBeforeMount(() => {
    getAlarmRecord()
}) 
</script>

<style lang="scss" scoped>
.equAlarmRecord {
    margin: 0 10px;
    max-height: 92vh;
    padding: 16px 25px;
    box-sizing: border-box;

    .circles {
        width: 100px;
        position: relative;
        padding-left: 12px;
        color: #25A749;
        margin: auto;

        &:before {
            content: '';
            width: 8px;
            height: 8px;
            display: block;
            border-radius: 50%;
            left: 20%;
            top: 8px;
            margin: auto;
            position: absolute;
            background-color: #25A749;
        }
    }

    .enable {
        color: #FF4D4F;

        &:before {
            content: '';
            background-color: #FF4D4F;
        }
    }
}
</style>
<style lang="scss" scoped>
:deep(thead .cell) {
    border-right: 1px solid #e4e7ed;

}

:deep thead {
    th:last-child {
        .cell {
            border-right: none;
        }
    }
}

:deep(.el-table .el-table__cell) {
    text-align: center;
    --el-table-header-bg-color: #f6f6f6;
}
</style>
